<template>
  <div v-loading="loading">
    <drawer title="案件详情" :visible="visible" @close="handleClose" size="85%">
      <div class="work-order-details">
        <!-- <remarkDrawer :visible.sync="remarkDrawer.visible" ></remarkDrawer>-->
        <div class="details-content">
          <div v-if="['distribute', 'process', 'all', 'audit', 'finish'].includes(type)" class="left">
            <el-tabs v-model="leftActiveTab">
              <el-tab-pane label="文书" name="1">
                <relatedDocuments :type="type" :uploadFileTypeDialog="uploadFileTypeDialog" :details="details" :playLoadData="playLoadData" :handlePreview="handlePreview"></relatedDocuments>
              </el-tab-pane>
              <el-tab-pane label="备注" name="2">
                <remarkDrawer :workOrderId="details.id" :workOrderNo="details.workOrderNo" :details="details" :remarkUpdateIndex="remarkDrawer.forceRefreshIndex"></remarkDrawer>
              </el-tab-pane>
            </el-tabs>
          </div>
          <div class="right">
            <div ref="contentScroll" class="content beautify-scroll">
              <!-- 不受理 && 没有 workOrderNumber 不显示-->
              <!-- v-if="!([6].includes(details.status) && !details.workOrderNumber)"  -->
              <div class="card">
                <div class="module-head touming">
                  <div class="title">
                    <!-- 主状态 -->
                    <span class="tag tag-big primary width">{{ workOrderStatusDict[details.status] }}</span>

                    <!-- 子状态  -->
                    <span class="tag tag-big primary width" v-if="![0, 2].includes(details.subStatus) && !isGiveUpOver">{{ workOrderSubStatusDict[details.subStatus] }}</span>
                    <!-- <span v-if="details.status === 12" class="tag primary">预审中</span>
                    <span v-if="details.status === 0" class="tag primary">待受理</span>
                    <span v-if="details.status === 1" class="tag primary">回退中</span>
                    <span v-if="details.status === 2" class="tag primary">待确认</span>
                    <span v-if="details.status === 3" class="tag primary">调查中</span>
                    <span v-if="details.status === 4" class="tag primary">待办结</span>
                    <span v-if="details.status === 5" class="tag primary">已办结</span>
                    <span v-if="details.status === 6" class="tag primary">不受理</span>
                    <span v-if="details.status === 7" class="tag primary">已中止</span>
                    <span v-if="details.status === 8" class="tag primary">已终止</span>
                    <span v-if="details.status === 9" class="tag primary">撤回中</span>
                    <span v-if="details.status === 13" class="tag primary">已退回</span>
                    <span v-if="details.status === 14" class="tag primary">放弃投诉举报</span>
                    <span v-if="details.status === 15" class="tag primary">待终止</span> -->

                    <!-- 1 自动跟踪 2 手动发起跟踪 -->
                    <span v-if="['1', '2'].includes(details.supervisionTag)" class="tag tag-big warning width">跟踪</span>
                    <!-- 1 自动异常 2 手动发起异常 -->
                    <span v-if="['1', '2'].includes(details.exceptionTag)" class="tag tag-big danger width">异常</span>
                    <!-- <span v-if="details.rejectReview === 'Y'" class="tag primary">复核</span> -->
                    <template v-if="!isGiveUpOver">
                      <span v-if="details.materialCorrectStatus === 0" class="tag tag-big warning width">
                        {{ details.subStatus === 2 ? "材料补正中" : "材料举证中" }}
                      </span>

                      <span v-if="[9].includes(details.status)" class="tag tag-big warning width">投诉人撤回中</span>
                      <span v-else-if="[10].includes(details.status)" class="tag tag-big warning width">投诉人已撤回</span>
                      <span v-else-if="details.auditFlag === 'Y'" class="tag tag-big success width">{{ details.workOrderAudit.auditStatus }}</span>
                      <span v-else-if="details.isDuplicated === 'Y'" class="tag tag-big orange width" style="background: rgba(245, 91, 35)">疑似重复</span>
                      <!-- <span v-else-if="![5, 6].includes(details.status)" class="tag primary">经办中</span> -->
                      <span v-if="details.repeatCheck === 'Y'" class="tag tag-big primary width">复议</span>
                      <span v-if="details.applyAmendmentNum > 0" class="tag tag-big warning width">修正</span>
                    </template>
                    <span class="workOrderNumber">{{ details.workOrderNumber }}</span>
                  </div>
                  <!--  <div class="title">
                    <span v-if="details.status === 12" class="tag primary">预审中</span>
                    <span v-if="details.status === 0" class="tag primary">待受理</span>
                    <span v-if="details.status === 2" class="tag primary">待确认</span>
                    <span v-if="details.materialCorrectStatus === 0" class="tag warning">材料补正中</span>
                    <span v-if="[9].includes(details.status)" class="tag warning">投诉人撤回中</span>
                    <span v-else-if="[10].includes(details.status)" class="tag warning">投诉人已撤回</span>
                    <span v-else-if="details.auditFlag === 'Y'" class="tag success">{{ details.workOrderAudit.auditStatus }}</span>
                    <span v-else-if="details.isDuplicated === 'Y'" class="tag orange" style="background: rgba(245, 91, 35)">疑似重复</span>
                    <span v-else-if="![5, 6].includes(details.status)" class="tag primary">经办中</span>
                    <span v-if="details.repeatCheck === 'Y'" class="tag primary">复议</span>
                    <span v-if="details.rejectReview === 'Y'" class="tag primary">复核</span>
                    <span class="workOrderNumber">{{ details.workOrderNumber }}</span>
                  </div> -->
                  <div v-if="details.status < 5" class="time">
                    <template v-if="details.materialCorrectStatus === 0">
                      <span>补正截止日期：</span>
                      <span>{{ details.lastCompleteTime }}</span>
                    </template>
                    <template v-else>
                      <template v-if="details.subStatus !== 7 && details.countDown">
                        <i class="img icon-clock" style="width: 18px; height: 18px"></i>
                        <span>处理剩余时限：</span>
                        <span :class="['', 'color-warning', 'color-danger'][countDownStatus(details.countDown, details.status)]">{{ details.countDown | formatDHMS }}</span>
                      </template>
                    </template>
                  </div>
                </div>
              </div>

              <!-- 跟踪状态、异常状态 -->
              <el-alert style="margin: 0 0 10px" v-if="['1'].includes(details.supervisionTag)" title="跟踪中" type="warning" :closable="false" show-icon>案件由于涉及已制定还款计划进入到跟踪状态。</el-alert>
              <el-alert style="margin: 0 0 10px" v-if="['1'].includes(details.exceptionTag)" title="异常" type="error" :closable="false" show-icon>案件由于未及时履行还款，已被标记为异常，请及时处理异常还款并联系省营商环境主管部门解除异常。</el-alert>
              <el-alert style="margin: 0 0 10px" v-if="['2'].includes(details.supervisionTag)" title="跟踪状态" type="warning" :closable="false" show-icon>{{ details.supervisionReasons }}</el-alert>
              <el-alert style="margin: 0 0 10px" v-if="['2'].includes(details.exceptionTag)" title="异常状态" type="error" :closable="false" show-icon>{{ details.exceptionReasons }}</el-alert>
              <!-- 跟踪状态、异常状态 -->

              <!-- <el-alert v-if="[9, 10].includes(details.status)" style="margin: 20px 0; border-radius: 2px" title="撤回理由：" type="warning" :closable="false" show-icon>
                {{ details.reason || "-" }}
              </el-alert> -->
              <!-- 审批流程记录、待审批信息 -->
              <template v-if="type === 'audit'">
                <!-- 待审批信息 -->
                <stay-approval-msg :details="details" :type="type"></stay-approval-msg>

                <div class="card">
                  <moduleHead title="审批流程记录" styleName="green"></moduleHead>
                  <auditProcessRecord :records="auditProcess"></auditProcessRecord>
                </div>
              </template>
              <!-- 案件基础信息 -->
              <case-base-msg :details="details"></case-base-msg>
              <!-- 案件办理信息 -->
              <case-handling :details="details"></case-handling>
              <!-- 不受理信息 -->
              <div class="card" v-if="details.status === 6">
                <moduleHead title="不受理信息"></moduleHead>
                <el-form class="key-value" v-if="details.rejectWorkOrderDto" label-width="130px">
                  <el-form-item label="不受理原因：">{{ details.rejectWorkOrderDto.notAcceptReason }}</el-form-item>
                  <el-form-item label="不受理备注：">{{ details.rejectWorkOrderDto.comment }}</el-form-item>
                  <template v-if="details.rejectWorkOrderDto && details.rejectWorkOrderDto.rejectAttachments">
                    <el-form-item label="通知书：">
                      <upload-preview :file-list="details.rejectWorkOrderDto.rejectAttachments" btnType="text"></upload-preview>
                    </el-form-item>
                  </template>
                </el-form>
              </div>
              <!-- 案件撤回信息 -->
              <div v-if="[9, 10].includes(details.status)">
                <moduleHead title="案件撤回信息"></moduleHead>
                <el-form class="key-value" label-width="100px">
                  <el-form-item label="撤回时间：">
                    {{ details.frontRevokeTime }}
                  </el-form-item>
                  <el-form-item label="撤回原因：">
                    {{ details.reason }}
                  </el-form-item>
                  <el-form-item label="撤回类型：">
                    {{ details.revokeType }}
                  </el-form-item>
                </el-form>
              </div>
              <!-- 终止信息 overWorkOrderVo -->
              <over-work-msg v-if="[15, 8].includes(details.status)" :details="details"></over-work-msg>

              <div v-if="details.repeatCheck === 'Y'" class="card">
                <moduleHead title="复议申请"></moduleHead>

                <el-form class="key-value" label-width="90px">
                  <el-form-item label="提出时间：">
                    {{ details.repeatCheckTime }}
                  </el-form-item>
                  <el-form-item label="提出理由：">
                    <div v-html="txt2HTML(details.repeatCheckReason)"></div>
                  </el-form-item>
                </el-form>
                <upload-preview v-if="details.repeatCheckAttachments && details.repeatCheckAttachments.length" :file-list="details.repeatCheckAttachments" :showDel="false" btnType="text"></upload-preview>
              </div>
              <!-- 还款信息 -->
              <repay-info :details="details" v-if="isArrearsAmount && [4, 5].includes(details.status)">
                <el-button slot="btn" v-if="repaymentPlan.length" @click="onShowRepaymentPlanDialog" type="primary" plain size="mini">还款计划</el-button>
              </repay-info>

              <!-- 处理信息-->
              <div v-if="details.workOrderSubmitFinishResult && [4, 5].includes(details.status)" class="card" style="margin-top: 20px">
                <moduleHead title="结案信息"></moduleHead>

                <el-form class="key-value" ref="appraiseForm" label-width="130px" label-suffix="：">
                  <el-form-item label="办结类型">{{ details.workOrderSubmitFinishResult.reason }}</el-form-item>
                  <el-form-item label="办结理由">
                    <div v-html="txt2HTML(details.workOrderSubmitFinishResult.comment)"></div>
                  </el-form-item>
                  <el-form-item label="结案状态">{{ details.finishStatus }}</el-form-item>
                  <el-form-item label="结案反馈">
                    <div>{{ details.workOrderSubmitFinishResult.satisfactionLevel | workOrderAtisFactionLevel }}</div>
                  </el-form-item>
                  <!--  <el-form-item label="结案报告："></el-form-item>-->
                  <el-form-item v-if="details.workOrderSubmitFinishResult.reportList && details.workOrderSubmitFinishResult.reportList.length" label="结案意见书">
                    <upload-preview :file-list="details.workOrderSubmitFinishResult.reportList" btnType="text"></upload-preview>
                  </el-form-item>
                  <el-form-item v-if="details.workOrderSubmitFinishResult.reportNoticeFile && details.workOrderSubmitFinishResult.reportNoticeFile.length" label="结案通知书">
                    <upload-preview :file-list="details.workOrderSubmitFinishResult.reportNoticeFile" btnType="text"></upload-preview>
                  </el-form-item>
                  <el-form-item v-if="details.workOrderSubmitFinishResult.attachmentList && details.workOrderSubmitFinishResult.attachmentList.length" label="其他">
                    <upload-preview :file-list="details.workOrderSubmitFinishResult.attachmentList" btnType="text"></upload-preview>
                  </el-form-item>
                </el-form>
              </div>

              <!-- 评价详情-->
              <div v-if="details.appraiseStatus === 'Y'" class="card">
                <moduleHead title="市场主体评价"></moduleHead>
                <el-form class="key-value" ref="appraiseForm" label-width="130px">
                  <el-row :gutter="0">
                    <el-col :span="9">
                      <el-form-item label="整体满意度：">
                        <startAppraise :value="workOrderAppraise.satisfiedScore" readonly></startAppraise>
                      </el-form-item>
                    </el-col>
                    <!-- <el-col :span="9">
                      <el-form-item label="处理时效性：">
                        <startAppraise :value="workOrderAppraise.processEffectiveScore" readonly></startAppraise>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label="处理有效性：">
                        <startAppraise :value="workOrderAppraise.processAvailableScore" readonly></startAppraise>
                      </el-form-item>
                    </el-col> -->
                  </el-row>
                  <el-form-item label="评价内容：">
                    <div v-html="txt2HTML(details.workOrderAppraise.comment)"></div>
                  </el-form-item>
                </el-form>
              </div>

              <div class="card" v-if="details.materialCorrectionDtoList && details.materialCorrectionDtoList.length">
                <moduleHead title="补正信息"></moduleHead>
                <el-form class="key-value" ref="appraiseForm" label-width="130px" label-suffix="：" v-for="item in details.materialCorrectionDtoList" :key="item.id">
                  <template v-if="item.workOrderAttachments && item.workOrderAttachments.length">
                    <el-form-item label="补正要求">
                      <div v-html="txt2HTML(item.correctRequirement)"></div>
                    </el-form-item>
                    <el-form-item label="补正时间">
                      <div>{{ item.correctTime }}</div>
                    </el-form-item>
                    <el-form-item label="补正文件">
                      <upload-preview :file-list="item.workOrderAttachments" btnType="text"></upload-preview>
                    </el-form-item>
                    <div class="split m-t-20"></div>
                  </template>
                </el-form>
              </div>

              <!-- 评价回访 -->
              <eval-follow :details="details" v-if="details.status === 5">
                <el-button slot="btn" v-if="userRoles.isTopAuthority" @click="returnSurveysDialog.visible = true" size="mini" type="primary" plain>添加评价回访</el-button>
              </eval-follow>

              <!-- 处理流程-->
              <process-flow :details="details" @view="handleShowProcessDetailsDialog"></process-flow>
            </div>
            <div class="extend">
              <slot name="extend" :details="details"></slot>
            </div>
            <div v-if="loading === false" class="dialog-footer-btn beautify-scroll">
              <slot name="footer-btn" :details="details" :workOrderPermission="workOrderPermission"></slot>
              <!-- audit -->
              <template v-if="['distribute', 'process'].includes(type)">
                <template v-if="details.status === 12 && details.auditFlag === 'N'">
                  <el-button @click="confirmDialog.visible = true" type="primary">确认收到</el-button>
                  <el-button @click="dialogFormVisible = true" type="primary" plain>退回修改或补正</el-button>
                </template>
                <!-- 不在审核、待受理 
               v-if="details.auditFlag === 'N' && details.status === 0 && type === 'all' && isLeaderDepartment" 
              -->
                <!-- auditFlag 是否审批中标记  是：Y   否：N -->
                <!-- 
                  不在审批状态 && 案件状态是待受理或者调查中 && !子状态已中止 && 受理阶段或查办阶段 && 材料补正需要判断是否是是否省级主管部门
                -->
                <!-- , 1 status暂时去掉回退中  -->
                <template v-if="details.auditFlag === 'N' && [0, 3].includes(details.status) && ![7].includes(details.subStatus) && ['process', 'distribute'].includes(type)">
                  <template v-if="details.materialCorrectStatus !== 0">
                    <el-button v-if="[0, 1].includes(details.status) && isLeaderDepartment" @click="replenishDialog.visible = true" type="primary" plain>发起材料补正</el-button>
                    <el-button v-else @click="replenishDialog.visible = true" type="primary" plain>发起材料举证</el-button>
                  </template>
                  <el-button v-else @click="handleRevoke" type="primary" plain>
                    {{ details.status === 0 ? "撤回材料补正" : "撤回材料举证" }}
                  </el-button>
                </template>
                <!-- , 1 status暂时去掉回退中  -->
                <template v-if="[0].includes(details.status) && details.auditFlag === 'N'">
                  <el-button @click="dialogFormVisible4 = true" type="primary" plain>撤回与放弃</el-button>
                </template>
              </template>
              <!--<el-button @click="remarkDrawer.visible = true" type="primary">案件备注 {{ myWorkOrderRemark }}</el-button>-->
              <el-button @click="handleClose" type="primary" plain>关闭</el-button>
            </div>
          </div>
        </div>
      </div>
    </drawer>

    <!-- 退回修改或补正 -->
    <return-modify :visible.sync="dialogFormVisible" :details="details" @success="playLoadData"></return-modify>
    <!-- 放弃投诉举报 -->
    <abandon-complaint :visible.sync="dialogFormVisible4" :details="details" @success="playLoadData"></abandon-complaint>
    <!-- 预览 -->
    <previewDialog :visible.sync="previewDialog.visible" :filePath="previewDialog.fileURL" width="900px"></previewDialog>
    <processDetailsDialog :records="auditProcess" :type="type" :visible.sync="processDetailsDialog.visible" :id="processDetailsDialog.details.id"></processDetailsDialog>
    <previewDialog :visible.sync="previewDialog.visible" :filePath="previewDialog.fileURL"></previewDialog>
    <replenishDialog :visible.sync="replenishDialog.visible" :workOrderId="details.id" @success="replenishSuccess" :title="details.status === 0 ? '发起材料补正' : '发起材料举证'"></replenishDialog>
    <!-- 预审确认弹框 -->
    <confirmDialog :visible.sync="confirmDialog.visible" :workOrderNo="details.workOrderNo" @success="confirmSuccess" :workOrder="details"></confirmDialog>
    <uploadFileTypeDialog :visible.sync="uploadFileTypeDialog.visible" :workOrderId="details.id" @success="playLoadData"></uploadFileTypeDialog>

    <repaymentPlanDialog :visible.sync="repaymentPlanDialog.visible" :workOrderDetails="details" :repaymentPlan="repaymentPlan" @success="playLoadData"></repaymentPlanDialog>
    <recallDialog :visible.sync="recallDialog.visible" :workOrderId="details.id" @success="getDetails()"></recallDialog>
    <returnSurveysDialog @success="playLoadData" :visible.sync="returnSurveysDialog.visible" :workOrderNo="details.workOrderNo"></returnSurveysDialog>
  </div>
</template>

<script>
import previewDialog from "@/views/workOrder/components/previewDialog";
import * as workOrderApi from "@/api/workOrder/index";
import fileList from "@/components/fileList/index.vue";
import recallDialog from "@/views/portals/components/recallDialog.vue";
import processDetailsDialog from "@/views/workOrder/components/processDetailsDialog";
import replenishDialog from "@/views/workOrder/components/replenishDialog";
import confirmDialog from "@/views/workOrder/components/confirmDialog";
import relatedDocuments from "@/views/workOrder/components/relatedDocuments";
import uploadFileTypeDialog from "@/views/workOrder/components/uploadFileTypeDialog.vue";
import upload from "@/components/upload";
import drawer from "@/components/drawer.vue";
import * as fileApi from "@/api/file";
import * as dictApi from "@/api/dict";

import {
  baseBool,
  filename,
  formatDHMS,
  hourMinute,
  unitMoney,
  timeFormatDHMS,
  timeRemaining,
  timeRemainingDHMS,
  txt2HTML,
  workOrderAppraiseStatus,
  workOrderAtisFactionLevel,
  workOrderAuditStatus,
  workOrderAuditType,
  workOrderComplaintObjectType,
  workOrderCreatorType,
  workOrderEventSource,
  workOrderProcessAuditStatus,
  workOrderPublicIntention,
  workOrderPublicStatus,
  workOrderStatus,
} from "@/utils/filters";
import * as mixins from "@/utils/mixins";
import { calcWorkOrderCountDownStatus, isEmpty } from "@/utils/common";
import moment from "moment";
import startAppraise from "@/components/startAppraise/index.vue";
import auditProcessRecord from "@/views/workOrder/components/auditProcessRecord";
import repaymentPlanDialog from "@/views/workOrder/components/repaymentPlanDialog.vue";
import remarkDrawer from "@/views/workOrder/components/remarkDrawer.vue";
import returnSurveysDialog from "@/views/workOrder/components/returnSurveysDialog.vue";
import * as remarkAPI from "@/api/remark";
import { mapState } from "vuex";
import { rolePermissionsMixin } from "@/views/workOrder/mixin";
import uploadPreview from "@/components/uploadInput/uploadPreview.vue";
import AbandonComplaint from "../detailsComponents/AbandonComplaint.vue";
import ReturnModify from "../detailsComponents/ReturnModify.vue";
import CaseBaseMsg from "../details/CaseBaseMsg.vue";
import CaseHandling from "../details/CaseHandling.vue";
import StayApprovalMsg from "../details/StayApprovalMsg.vue";
import RepayInfo from "../details/RepayInfo.vue";
import ProcessFlow from "../details/ProcessFlow.vue";
import OverWorkMsg from "../details/OverWorkMsg.vue";
import { workOrderStatusDict, workOrderSubStatusDict } from "@/utils/dict";
import EvalFollow from "../details/EvalFollow.vue";

export default {
  name: "detailsDialog",
  components: {
    previewDialog,
    drawer,
    startAppraise,
    processDetailsDialog,
    previewDialog,
    upload,
    replenishDialog,
    confirmDialog,
    fileList,
    auditProcessRecord,
    repaymentPlanDialog,
    remarkDrawer,
    recallDialog,
    returnSurveysDialog,
    relatedDocuments,
    uploadFileTypeDialog,
    uploadPreview,
    AbandonComplaint,
    ReturnModify,
    CaseBaseMsg,
    CaseHandling,
    StayApprovalMsg,
    RepayInfo,
    ProcessFlow,
    OverWorkMsg,
    EvalFollow,
  },
  mixins: [mixins.loading, mixins.form, mixins.affirm, rolePermissionsMixin],
  filters: {
    workOrderEventSource,
    workOrderStatus,
    timeRemaining,
    workOrderCreatorType,
    workOrderPublicStatus,
    workOrderPublicIntention,
    timeRemainingDHMS,
    hourMinute,
    workOrderAppraiseStatus,
    timeFormatDHMS,
    formatDHMS,
    workOrderComplaintObjectType,
    filename,
    workOrderAuditType,
    workOrderAuditStatus,
    workOrderProcessAuditStatus,
    unitMoney,
    workOrderAtisFactionLevel,
    baseBool,
  },
  props: ["visible", "id", "canShowAppraiseForm", "type"],
  data() {
    return {
      options3: [],
      publishing: false,
      loading: false,
      details: {},
      eventSourceArr: [],
      leftActiveTab: "1",
      processDetailsDialog: {
        details: {},
        visible: false,
      },
      previewDialog: {
        fileURL: "",
        visible: false,
      },
      repaymentPlanDialog: {
        visible: false,
      },
      remarkDrawer: {
        visible: false,
        forceRefreshIndex: 0,
      },
      returnSurveysDialog: {
        visible: false,
      },
      recallDialog: {
        visible: false,
      },
      confirmDialog: { visible: false },
      replenishDialog: { visible: false },
      uploadFileTypeDialog: { visible: false },
      auditProcess: [],
      uploadFileType: 1,
      fileCode: 0,
      repaymentPlan: [],
      myWorkOrderRemark: "",
      backForm: {
        modifyComment: "",
        correctionComment: "",
      },
      dialogFormVisible: false,
      dialogFormVisible2: false,
      dialogFormVisible4: false,
      options: [],
      acceptForm: {
        type: 0,
        desc: "",
        checked: "",
        dept: "",
        processDepartmentCode: "",
        processDepartmentName: "",
      },
      acceptRules: {
        desc: [{ required: true, message: "请填写" }],
        processDepartmentCode: [{ required: true, message: "请选择" }],
        type: [{ required: true, message: "请选择" }],
      },
      options2: [],
      uploading: false,
      previewDialog: {
        fileURL: "",
        visible: false,
      },
      unAcceptRules: {
        desc: [{ required: true, message: "请输入" }],
      },
      dialogFormVisible5: false,
      evidenceForm: {
        date: "",
        content: "",
      },
      departmentTree: [],
      departmentTree2: [],
      departments: [],
      workOrderStatusDict: workOrderStatusDict,
      workOrderSubStatusDict: workOrderSubStatusDict,
      workOrderPermission: {},
    };
  },
  computed: {
    ...mapState(["userRoles", "userInfo"]),
    actualProcessDay() {
      const actualProcessDay = this.details.actualProcessDay;
      if (isEmpty(actualProcessDay)) return "-";
      return `${timeFormatDHMS(Number(actualProcessDay) * 1000)}`;
    },
    workOrderProcessResult() {
      return this.details.workOrderProcessResult || {};
    },
    workOrderSubmitFinishResult() {
      return this.details.workOrderSubmitFinishResult || {};
    },
    workOrderAppraise() {
      return this.details.workOrderAppraise || {};
    },
    workOrderAudit() {
      return this.details.workOrderAudit || {};
    },
    lastWorkOrderEvaluates() {
      return this.workOrderEvaluates[this.workOrderEvaluates.length - 1] || {};
    },
    // 欠款金额判断
    isArrearsAmount() {
      // details.debtAmount > 0  原字段
      return this.details.questionMainInfo?.govArrears?.arrearsAmount > 0;
    },
    ///案件是否已放弃投诉举报 并未处于审批状态  或者 已撤回
    isGiveUpOver() {
      return (this.details.status === 14 && this.details.auditFlag === "N") || this.details.status === 10;
    },
  },
  watch: {
    visible(val) {
      if (val) {
        this.playLoadData();

        this.$nextTick(() => {
          this.$refs.contentScroll.scrollTop = 0;
        });
      } else {
        this.$nextTick().then(() => {
          this.details = {};
          this.leftActiveTab = "1";
        });
      }
    },
    "remarkDrawer.visible"(val) {
      this.queryMyWorkOrderRemark();
    },
  },

  created() {},
  methods: {
    txt2HTML,

    countDownStatus: calcWorkOrderCountDownStatus,
    getAuditLog() {
      workOrderApi.audit
        .log({
          actionTypeNumber: this.details.workOrderAudit.actionTypeNumber,
        })
        .then((r) => {
          this.auditProcess = r.result;
        });
    },
    handleAccept() {
      this.$refs.acceptForm.validate((valid) => {
        if (valid) {
          if (this.$refs.cascader2) {
            const checkedNode = this.$refs.cascader2.getCheckedNodes()[0];
            params.processDepartmentName = checkedNode ? checkedNode.data.name : "";
          }

          var params = {
            workOrderNo: this.details.workOrderNo,
            type: this.acceptForm.type,
            comment: this.acceptForm.desc,
            processDepartmentCode: this.acceptForm.processDepartmentCode,
          };
          if (this.acceptForm.checked) {
            params.pushDepartmentCode = this.departments.map((a) => a.code).join(";");
            params.pushDepartmentName = this.departments.map((a) => a.code).join(";");
          }

          workOrderApi.all.acceptance(params).then((r) => {
            this.dialogFormVisible2 = false;
            this.playLoadData();
            this.$message.success(r.msg);
          });
        }
      });
    },
    handleShowProcessDetailsDialog(details) {
      this.processDetailsDialog.details = details;
      this.processDetailsDialog.visible = true;
    },
    getEventSource() {
      return dictApi.list({ parentCode: "1001" }).then((res) => {
        this.eventSourceArr = res.result;
      });
    },
    hideProcessDetailsBtn(type) {
      return ["05", "09", "11", "12", "17", "21", "07", "00"].includes(type);
    },
    playLoadData() {
      clearInterval(this.timer);
      this.remarkDrawer.forceRefreshIndex++;
      this.decorateLoading(() => {
        const api = workOrderApi[this.type] || workOrderApi.all;
        // const api =  workOrderApi.all;
        return api.detail(this.id).then((res) => {
          this.$emit("read");
          const data = res.result;

          if (data.workOrderAudit) {
            if (data.workOrderAudit.attachmentFile && data.workOrderAudit.attachmentFile !== "null") {
              data.workOrderAudit.attachmentFile = [JSON.parse(data.workOrderAudit.attachmentFile)];
            } else {
              data.workOrderAudit.attachmentFile = [];
            }

            if (data.workOrderAudit.reportFile && data.workOrderAudit.reportFile !== "null") {
              data.workOrderAudit.reportFile = [JSON.parse(data.workOrderAudit.reportFile)];
            } else {
              data.workOrderAudit.reportFile = [];
            }
          }

          // 投诉举报信息附件
          let allMaterialCorrectionDtoList = [];
          if (data.materialCorrectionDtoList.length) {
            for (const item of data.materialCorrectionDtoList) {
              if (Array.isArray(item.workOrderAttachments)) {
                allMaterialCorrectionDtoList = allMaterialCorrectionDtoList.concat(
                  item.workOrderAttachments.filter((item) => {
                    return Boolean(item.materialCorrectRecordId);
                  })
                );
              }
            }
          }

          for (const item of data.processAttachmentList) {
            if (item.behavivor !== "") {
              allMaterialCorrectionDtoList.push(item);
            }
          }

          // 过程文件
          const processAttachmentList = [];
          for (const item of data.processAttachmentList) {
            if (item.behavivor === "") {
              processAttachmentList.push(item);
            }
          }

          data.processAttachmentList = processAttachmentList;
          data.allMaterialCorrectionDtoList = allMaterialCorrectionDtoList;

          // debugger
          this.details = data;

          if (this.type === "audit") this.getAuditLog();
          if (this.isArrearsAmount && [4, 5].includes(this.details.status)) this.getPayPlan();

          this.queryMyWorkOrderRemark();

          if ([2].includes(this.details.status)) {
            this.getWorkOrderPermission();
          }

          const countDown = moment(this.details.currentStepDeadline).diff(moment(), "milliseconds");
          this.$set(this.details, "countDown", countDown);
          this.$emit("dataLoaded", this.details);

          if (countDown <= 0) return;
          clearInterval(this.timer);
          this.timer = setInterval(() => {
            this.details.countDown -= 1000;
            if (this.details.countDown <= 0) {
              clearInterval(this.timer);
              this.playLoadData();
            }
          }, 1000);
        });
      });
    },
    queryMyWorkOrderRemark() {
      remarkAPI.query({ workOrderId: this.details.id }).then((r) => {
        this.myWorkOrderRemark = r.result.length;
      });
    },
    getPayPlan() {
      workOrderApi.all.queryPayPlan({ workOrderId: this.details.id }).then((r) => {
        this.repaymentPlan = r.result;
      });
    },
    // 待确认办理状态获取复核和退回按钮的权限信息
    getWorkOrderPermission() {
      workOrderApi.distribute.getWorkOrderPermission({ id: this.details.id }).then((r) => {
        this.workOrderPermission = r.result;
      });
    },
    handleClose() {
      this.$emit("update:visible", false);
    },
    handleClose2(formName) {
      this.$refs[formName].resetFields();
    },
    handleDownload(row) {
      fileApi.download({
        downloadFileName: row.fileName,
        filePath: row.fileUrl,
      });
    },
    confirm(message) {
      return this.$confirm(message, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
    },
    handlePreview(row) {
      this.previewDialog = {
        visible: true,
        fileURL: row.fileUrl,
      };
    },
    handleUploadSuccess({ file, fileCode }) {
      // const file = fileList[fileList.length - 1]
      const data = {
        attachmentList: [file],
        id: this.details.id,
        code: fileCode,
      };
      workOrderApi[this.type].addAttachment(data).then(() => {
        // this.details.attachmentList.push(file)
        this.$message.success("上传成功");
        this.playLoadData();
        this.uploadFileTypeDialog.visible = false;
      });
    },
    handleRevoke() {
      this.confirm("确认撤销材料补正吗？")
        .then(() => workOrderApi.distribute.revoke({ workOrderId: this.details.id }))
        .then(() => {
          this.playLoadData();
          this.$emit("replenishRevoke");
        });
    },
    replenishSuccess() {
      this.playLoadData();
      this.$emit("replenishSuccess");
    },
    confirmSuccess() {
      this.playLoadData();
      this.$emit("confirmSuccess");
    },
    onShowRepaymentPlanDialog() {
      this.repaymentPlanDialog.visible = true;
    },
  },
};
</script>

<style lang="less" scoped>
.card {
  .module-head {
    .time {
      display: flex;
      align-items: center;
      font-size: 18px;
      font-weight: 600;

      span:first-child {
        color: #323232;
      }
    }
  }
}
.process-item {
  //padding: 10px 0;
  height: 45px;
  display: flex;
  align-items: center;

  & > span {
    position: relative;
    min-height: 16px;
    flex: 1;

    &:first-child {
      padding-left: 30px;

      &::before {
        //margin-right: 20px;
        position: absolute;
        left: 0;
        top: 5px;
        content: "";
        width: 10px;
        height: 10px;
        background: #cccccc;
        border-radius: 50%;
        z-index: 2;
      }

      &::after {
        position: absolute;
        content: "";
        left: 4px;
        top: 5px;
        width: 1px;
        height: 45px;
        background: #cccccc;
        z-index: 1;
      }
    }
  }

  &.is-highlight {
    & > span {
      &:first-child {
        &::before {
          background: #0b5fd5;
          box-shadow: 0px 2px 4px 0px rgba(9, 78, 197, 0.3);
        }

        &::after {
          background-color: transparent;
        }
      }
    }
  }
}

.work-order-details {
  //position: relative;
  height: 100%;
  width: 100%;
  .details-content {
    display: flex;
    height: 100%;
    width: 100%;

    .left {
      width: 300px;
      flex-shrink: 0;
      padding-right: 20px;
    }
    .right {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      .content {
        flex: 1;
        flex-shrink: 0;
        overflow-x: hidden;
      }
      .extend {
        width: 100%;
      }
    }

    /deep/ .el-tabs__nav {
      width: 100%;

      .el-tabs__item {
        width: 50%;
        text-align: center;
        font-size: 16px;
        color: #8c8c8c;
        border-bottom: none;

        &.is-active {
          border-bottom: 2px solid #0a6bf3;
          font-weight: 700;
          color: #0a6bf3;
        }
      }
    }
  }
}
.dialog-footer-btn {
  box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.2);
  overflow-x: auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  // width: 100%;
  min-height: 36px;
}
.workOrderNumber {
  margin-left: 10px;
  font-size: 18px;
}
.el-form-item__content {
  div {
    word-break: break-all;
  }
}
/deep/.el-alert__description {
  word-break: break-all;
}
</style>
